{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{% translate "Tickets" %}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{% translate "Tickets" %}</h1>
    <p>{% translate "Every logged call opens a ticket. Open ones still need work; escalated ones are waiting for a supervisor or administrator." %}</p>
  </div>
  {% if user.is_supervisor %}<div class="actions"><a class="btn" href="{% url 'export' 'tickets' %}">{% translate "Download all (CSV)" %}</a></div>{% endif %}
</div>

<div class="filters">
  <div class="seg" aria-label="{% translate 'Which tickets' %}">
    <a href="{% url_with show='all' %}"{% if show == 'all' %} aria-current="true"{% endif %}>{% translate "All" %}</a>
    <a href="{% url_with show='open' %}"{% if show == 'open' %} aria-current="true"{% endif %}>{% translate "Open" %}<span class="c">{{ counts.open }}</span></a>
    <a href="{% url_with show='escalated' %}"{% if show == 'escalated' %} aria-current="true"{% endif %}>{% translate "Escalated" %}<span class="c">{{ counts.escalated }}</span></a>
    <a href="{% url_with show='resolved' %}"{% if show == 'resolved' %} aria-current="true"{% endif %}>{% translate "Resolved" %}</a>
  </div>
  <div class="seg" aria-label="{% translate 'Whose' %}">
    <a href="{% url_with scope='mine' %}"{% if scope == 'mine' %} aria-current="true"{% endif %}>{% if user.is_supervisor and show == 'escalated' %}{% translate "For me" %}{% else %}{% translate "Mine" %}{% endif %}</a>
    <a href="{% url_with scope='all' %}"{% if scope == 'all' %} aria-current="true"{% endif %}>{% translate "Whole team" %}</a>
  </div>
  <form method="get">
    <input type="hidden" name="show" value="{{ show }}"><input type="hidden" name="scope" value="{{ scope }}">
    <select name="urgency" aria-label="{% translate 'Urgency' %}" data-autosubmit>
      <option value="">{% translate "Any urgency" %}</option>
      {% for value, label in urgencies %}<option value="{{ value }}"{% if value == urgency %} selected{% endif %}>{{ label }}</option>{% endfor %}
    </select>
    <noscript><button class="btn" type="submit">{% translate "Show" %}</button></noscript>
  </form>
</div>

{% if page.object_list %}
<div class="table-wrap">
  <table>
    <thead><tr><th>{% translate "Ticket" %}</th><th>{% translate "Caller" %}</th><th>{% translate "Subject" %}</th><th>{% translate "Urgency" %}</th><th class="hide-sm">{% translate "Status" %}</th><th class="hide-sm">{% translate "Handled by" %}</th><th class="hide-sm">{% translate "Opened" %}</th></tr></thead>
    <tbody>
    {% for t in page %}
      <tr>
        <td class="nowrap"><a class="title num" href="{{ t.get_absolute_url }}">{{ t.number }}</a></td>
        <td class="nowrap"><a href="{{ t.contact.get_absolute_url }}">{{ t.contact.name }}</a></td>
        <td><a class="title" href="{{ t.get_absolute_url }}">{{ t.title|truncatechars:90 }}</a>
          {% if t.crisis %}<span class="pill danger">{% if t.crisis_waiting %}{% translate "Caller in danger" %}{% else %}{% translate "Was in danger" %}{% endif %}</span>{% endif %}
          {% if t.is_escalated %}<div class="small esc-note">{% if t.escalated_to %}{% blocktranslate trimmed with name=t.escalated_to.display_name %}Escalated to {{ name }}{% endblocktranslate %}{% else %}{% translate "Escalated to supervisors" %}{% endif %}</div>{% endif %}</td>
        <td><span class="pill u-{{ t.urgency }}">{{ t.get_urgency_display }}</span></td>
        <td class="hide-sm"><span class="pill t-{{ t.status }}">{{ t.get_status_display }}</span></td>
        <td class="hide-sm">{{ t.assigned_to.display_name|default:"—" }}</td>
        <td class="hide-sm muted nowrap">{{ t.created_at|when }}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% include "_pager.html" %}
{% else %}
<div class="panel empty"><strong>{% if show == 'escalated' %}{% translate "Nothing escalated." %}{% elif show == 'open' %}{% translate "No open tickets." %}{% else %}{% translate "No tickets here." %}{% endif %}</strong>{% translate "Tickets are opened automatically each time a call is logged." %}</div>
{% endif %}
{% endblock %}